<template>
  <el-table :data="list" style="width: 100%">
    <el-table-column fixed prop="_id" :label="$t('message.id')" />
    <el-table-column prop="username" :label="$t('message.username')" />
    <el-table-column prop="reason" label="理由" />
    <el-table-column label="开始时间">
      <template #default="scope">
        <el-button type="warning">{{ dayjs(scope.row.start).format('YYYY年MM月DD日') }}</el-button>
      </template>
    </el-table-column>
    <el-table-column label="结束时间">
      <template #default="scope">
        <el-button type="primary">{{ dayjs(scope.row.end).format('YYYY年MM月DD日') }}</el-button>
      </template>
    </el-table-column>
    <el-table-column label="附件">
      <template #default="scope">
        <el-image
          v-if="scope.row.extend"
          style="width: 100px; height: 100px"
          :src="'/api/' + scope.row.extend.split(',')[0]"
          :zoom-rate="1.2"
          :preview-src-list="scope.row.extend.split(',').map((item: any) => '/api/' + item)"
          :initial-index="4"
          :preview-teleported="true"
          fit="cover"
        />
      </template>
    </el-table-column>
    <el-table-column label="状态">
      <template #default="scope">
        <span v-if="type == 2">
          <el-button type="warning" v-if="scope.row.type == 1">待审批</el-button>
          <el-button type="success" v-if="scope.row.type == 2">已同意</el-button>
          <el-button type="danger" v-if="scope.row.type == 3">已拒绝</el-button>
        </span>
        <span v-if="type == 1">
          <span v-if="scope.row.type == 1">
            <el-button type="success" @click="updateType(scope.row, 2)">同意</el-button>
            <el-button type="danger" @click="updateType(scope.row, 3)">拒绝</el-button>
          </span>
          <el-button type="success" v-if="scope.row.type == 2">已同意</el-button>
          <el-button type="danger" v-if="scope.row.type == 3">已拒绝</el-button>
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { dayjs } from 'element-plus'
import { leaveUpdate } from '@/service/leaveService'
let props = defineProps(['list', 'type'])
//更新状态
let updateType = async (item: any, type: any) => {
  let res = await leaveUpdate({
    id: item._id,
    type
  })
  if (res.data.code == 200) {
    item.type = type
  } else {
    alert(res.data.msg)
  }
}

</script>

<style></style>
